<template>
  <div class="wrapper">
    <div class="qrcode image" v-if="qrcode.length > 0">
      <div>可以扫描下面二维码付款(或者根据银行卡转帐):</div>
      <img :src="qrcode" />
    </div>
    <div class="list">
      <div class="txt">请上传打款凭证:</div>
      <cube-upload
        v-model="fileList"
        :action="action"
        :max="10"
        :simultaneous-uploads="1"
        @file-success="success"
        @file-removed="remove"
        @files-added="filesAdded" />
    </div>
  </div>
</template>

<script>
import config from '@/config/code'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'offline',
  computed: {
    action() {
      return {
        // target: `${process.env.VUE_APP_BASE_API}/api/upload/execute?max-width=750&width=350`,
        // 没有上传width,不会有thumb图
        // max-width, 只要限制本图的宽度
        target: `${process.env.VUE_APP_BASE_API}/api/upload/execute?max-width=750`,
        headers: this.headers,
        data: {
          order_id: this.$route.params.order_id
        }
      }
    },
    headers() {
      // console.log(this.$store.getters['ExecUser/token'])
      const tokenName = process.env.VUE_APP_TOKEN
      return {
        // 'X-Token-YANG': this.$store.getters['ExecUser/token']
        [tokenName]: this.$store.getters['ExecUser/token']
      }
    }
  },
  data() {
    return {
      fileList: [],
      qrcode: ''
    }
  },
  methods: {
    filesAdded(files) {
      let hasIgnore = false
      // const maxSize = 1 * 1024 * 1024 // 1M
      const maxSize = 1 * 1024 * 1024 * 10 // 10M
      for (const k in files) {
        const file = files[k]
        if (file.size > maxSize) {
          file.ignore = true
          hasIgnore = true
        }
      }
      hasIgnore && this.$createToast({
        type: 'warn',
        time: 1000,
        // txt: 'You selected >1M files'
        txt: '文件超过了10M'
      }).show()
    },
    success(data) {
      const { response } = data
      // console.log(response, config.CODE_SUCCESS)
      if (response.code === config.CODE_SUCCESS) {
        // this.fileList.push({
        //   url: response.data.full_name
        // })
        // set image id
        this.fileList[this.fileList.length - 1].id = response.data.id
        return this.$createToast({
          type: 'correct',
          time: 1500,
          txt: response.message,
          onTimeout: () => {
            // this.$router.push('/service/order/2')
          }
        }).show()
      }
      if (response.code === config.CODE_ERROR) {
        // delete last item
        this.fileList.pop()
        return this.$createToast({
          type: 'error',
          time: 1500,
          txt: response.message
        }).show()
      }
    },
    remove(data) {
      // console.log(data)
      api.Order.removeOffline({ id: data.id }).then(() => {
        return this.$createToast({
          type: 'correct',
          time: 1500,
          txt: '删除成功',
          onTimeout: () => {
          }
        }).show()
      })
    },
    init() {
      api.Order.getOffline({ order_id: this.$route.params.order_id }).then(response => {
        let { data } = response
        data = data = base64.parse(data)
        const list = data.list
        // console.log(list)
        list.forEach(x => {
          this.fileList.push({
            url: x.path,
            id: x.id
          })
        })
        // console.log(data)
        if (data.qrcode) {
          this.qrcode = data.qrcode.path
        }
        // console.log(this.qrcode)
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped lang="stylus">
.wrapper
  .qrcode
    padding 10px
    background white
    display flex
    flex-direction column
    margin-bottom 10px
    div
      margin-bottom 10px
  .list
    background white
    padding 5px
    .txt
      font-weight 700
      height 30px
      line-height 30px
      text-align left
</style>
